<!DOCTYPE html>
<html>
<head>
    <title>嫁给爱情的每一天</title>
    <meta charset="utf-8">
    <style>
        :root { --primary-color: #ff69b4; }
        body {
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #ff9cd3, #ff69b4, #ff3d8f);
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Microsoft YaHei', cursive;
            position: relative;
            overflow: hidden;
        }
        h1 {
            color: #fff;
            font-size: 4rem;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
            margin-top: 25vh;
            animation: heartbeat 1.2s infinite;
        }
        @keyframes heartbeat {
            0% { transform: scale(1); }
            15% { transform: scale(1.25); }
            30% { transform: scale(0.95); }
            45% { transform: scale(1.15); }
            60% { transform: scale(1); }
        }
        button {
            padding: 15px 40px;
            font-size: 1.8rem;
            background: rgba(255,255,255,0.9);
            color: var(--primary-color);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        button:hover { transform: scale(1.1); }
        .hearts { position: absolute; pointer-events: none; }
        .heart {
            animation: float 3s linear forwards;
            font-size: 24px;
            position: absolute;
        }
        @keyframes float {
            to { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }
    </style>
</head>
<body>
    <h1>💖 猪猪老婆，嫁给我好吗？ 💍</h1>
    <button onclick="showRing()">💞 立刻答应 💞</button>
    <div class="hearts" id="hearts"></div>

    <script>
        // 点击按钮特效
        function showRing() {
            document.body.innerHTML = `
                <div style="
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    text-align: center;
                    color: white;
                    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
                ">
                    <h2 style="font-size:4em">🎉 我愿意！</h2>
                    <p style="font-size:1.5em">💕 从此刻起，余生都是你 💕</p >
                    <div style="font-size:6em; animation: rotate 2s linear infinite">💍</div>
                </div>
            `;
            startFireworks();
        }

        // 自动生成爱心雨
        function createHearts() {
            setInterval(() => {
                const heart = document.createElement('div');
                heart.className = 'heart';
                heart.innerHTML = '❤️';
                heart.style.left = Math.random() * 100 + 'vw';
                document.getElementById('hearts').appendChild(heart);
                setTimeout(() => heart.remove(), 3000);
            }, 300);
        }
        
        createHearts();
    </script>
</body>
</html>